<template>
    <div>
        <div class="container">
            <!-- 小微企业贷 -->
            <div class="loan-box">
                <div class="loan-box-img">
                    <img :src="loan_img" alt="" class="loan-img">
                </div>
                <div class="loan-box-text">小微企业贷</div>
                <div class="loan-box-context">小微企业贷，是持牌银行与小望科技合作，为全国中小微企业提供的用于合法经营所需的纯线上人民币信用贷款产品。该产品结合大数据和金融科技，企业从申请到提款全部在线完成，无需抵押，额度立等可见，随时提款，按日计息，随借随还。</div>
            </div>
            <!-- 产品特点 -->
            <div class="product-features-box">
                <div class="product-features-top">
                    产品特点
                </div>
                <div class="product-features-list">
                    <div class="p">
                        <span class="span1">1、</span>
                        <span class="span2">额度高，最高可贷300万；</span>
                    </div>
                    <div class="p">
                        <span class="span1">2、</span>
                        <span class="span2">利息低，日息低至万3，借10000元每天利息3元不到；</span>
                    </div>
                    <div class="p">
                        <span class="span1">3、</span>
                        <span class="span2">放款速度快，全线上流程操作，无人工参与，效率高；</span>
                    </div>
                    <div class="p">
                        <span class="span1">4、</span>
                        <span class="span2">用款灵活，直接打款到企业账户，企业自主支配，提前还款不收取任何手续费；</span>
                    </div>
                </div>
            </div>
            <!-- 申请流程 -->
            <div class="application-process-box">
                <div class="application-process-top">
                    申请流程
                </div>
                <div class="application-process-box-img">
                    <img :src="process_img" alt="" class="process-img">
                </div>
                <!-- <div class="application-process-box-title">需提前准备材料</div>
                <div class="application-process-box-context">申贷信息、个人信息、银行卡、身份证正反面、营业执照、现场照片</div> -->
            </div>
            <!-- 准入条件 -->
            <div class="access-box">
                <div class="access-top">
                    准入条件
                </div>
                <div class="access-list">
                    <div class="p">
                        <span class="span1">1、</span>
                        <span class="span2">法定代表人年龄：18—70岁之间且不能为外籍或港澳台籍；</span>
                    </div>
                    <div class="p">
                        <span class="span1">2、</span>
                        <span class="span2">企业不能为分公司或者合伙企业并且注册类型不能是外资、港台合资；</span>
                    </div>
                    <div class="p">
                        <span class="span1">3、</span>
                        <span class="span2">企业及企业法人代表无失信被执行记录；</span>
                    </div>
                    <div class="p">
                        <span class="span1">4、</span>
                        <span class="span2">企业有 1 年半以上经营数据，且最近一年度销售额在30万以上；</span>
                    </div>
                    <div class="p">
                        <span class="span1">5、</span>
                        <span class="span2">企业当前连续未开票天数小于45天；</span>
                    </div>
                    <div class="p">
                        <span class="span1">6、</span>
                        <span class="span2">企业近1年下游交易对手大于等于2个；</span>
                    </div>
                    <div class="p">
                        <span class="span1">7、</span>
                        <span class="span2">禁入行业：煤炭开展和洗选业、造纸和纸制品业、化学纤维制造业、金融业、房地产行业、国际组织；</span>
                    </div>
                    <div class="p">
                        <span class="span1">8、</span>
                        <span class="span2">目前开放地区：广西南宁，山东济南；</span>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <!-- 立即申请 -->
            <div class="apply-immediately-btn" @click="apply_btn()">立即申请</div>
        </div>
    </div>
</template>

<script>
import $                                    from 'jquery'
import { Indicator,Toast,MessageBox }       from 'mint-ui'
import EnvConfig                            from '../config/env.config'
import ApiConfig                            from '../config/api.config'

export default {
    name: 'Detail',
    data() {
        return {
            loan_img:require('../assets/images/logo.png'),
            process_img:require('../assets/images/wzdProcess_img.png')
        }
    },
    methods:{
        // 立即申请按钮
        apply_btn(){
            //跳转到申请微税贷页面
            this.$router.push('/user')
            /*
            MessageBox({
                title: '注意！',
                message: '<p style="width:100%;height:20px;line-height:20px;float:left;font-family:PingFangSC-Regular;font-size:14px;color:#999999;    letter-spacing: -0.23px;">请务必联系客服人员协助您</p>'+
                '<p style="width:100%;height:20px;line-height:20px;float:left;font-family:PingFangSC-Regular;font-size:14px;color:#999999;    letter-spacing: -0.23px;">完成发票采集</p>'+
                '<a href="tel:0571-28284510" style="display:inline-block;width:100%;height:20px;line-height:20px;text-decoration:none;color: #5b70f2;font-family:PingFangSC-Regular;font-size:14px;letter-spacing: -0.23px;">客服电话:0571-28284510</a>',
                showCancelButton: true
            })
            .then(action => {
                if(action === 'confirm'){
                    //跳转到申请微税贷页面
                    this.$router.push('/user')
                }
            });
            */
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    background-color:#f2f2f2;
    .loan-box{
        width: 100%;
        float: left;
        margin-top: 24px;
        border-radius: 8px;
        box-shadow: 0 2px 4px 0 rgba(52,52,52,0.10);
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #fff;
        .loan-box-img{
            width: 100%;
            height: 40px;
            margin-top: 20px;
            overflow: hidden;
            text-align:center;
            .loan-img{
                display: inline-block;
                width: 40px;
                height: 40px;
            }
        }
        .loan-box-text{
            width: 100%;
            height: 24px;
            line-height: 24px;
            text-align: center;
            margin-top: 4px;
            font-size: 16px;
            font-family: PingFangSC-Medium;
            color:#333333;
            font-weight: 550;
        }
        .loan-box-context{
            width: 100%;
            line-height: 20px;
            margin-top: 10px;
            font-size: 12px;
            color:#333333;
            letter-spacing: -0.2px;
            margin-bottom: 20px;
        }
    }
    .product-features-box{
        width: 100%;
        float: left;
        margin-top: 12px;
        border-radius: 10px;
        background: #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(52,52,52,0.10);
        padding: 0 10px;
        box-sizing: border-box; 
        .product-features-top{
            width: 100%;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            letter-spacing: -0.23px;
            color:#333333;
            float: left;
            position: relative;
            font-family: PingFangSC-Medium;
            font-weight: 550;
        }
        .product-features-top::after{
            content: "";
            width:100%;
            height: 1px;
            background-color: #D8D8D8;
            position: absolute;
            left: 0;
            top:36px;
        }
        .product-features-top::before{
            content: "";
            width:3px;
            height: 15px;
            background-color: #2529E8;
            position: absolute;
            left: -10px;
            top: 10.5px;
        }
        .product-features-list{
            width: 100%;
            float: left;
            margin-top: 4px;
            margin-bottom: 12px;
            // background-color: red;
        }
        .p{
            width: 100%;
            float: left;
        }
        .span2{
            display: inline-block;
            width: 95%;
            line-height: 22px;
            float: left;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color:#333333;
        }
        .span1{
            display: inline-block;
            width: 4.8%;
            line-height: 22px;
            float: left;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color:#333333;
        }
    }
    .application-process-box{
        width: 100%;
        float: left;
        margin-top: 12px;
        border-radius: 10px;
        background: #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(52,52,52,0.10);
        padding: 0 10px 12px 10px;
        box-sizing: border-box; 
        .application-process-top{
            width: 100%;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            letter-spacing: -0.23px;
            color:#333333;
            float: left;
            position: relative;
            font-family: PingFangSC-Medium;
            font-weight: 550;
        }
        .application-process-top::after{
            content: "";
            width:100%;
            height: 1px;
            background-color: #D8D8D8;
            position: absolute;
            left: 0;
            top:36px;
        }
        .application-process-top::before{
            content: "";
            width:3px;
            height: 15px;
            background-color: #2529E8;
            position: absolute;
            left: -10px;
            top: 10.5px;
        }
        .application-process-box-img{
            width: 100%;
            height: 124px;
            // background-color: red;
            float: left;
            margin-top: 4px;
            .process-img{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
        }
        .application-process-box-title{
            width: 100%;
            height: 20px;
            line-height: 20px;
            color:#2529E8;
            font-family: PingFangSC-Regular;
            text-align: left;
            font-size: 12px;
            float: left;
            letter-spacing: -0.2px;
            margin-top: 8px;
        }
        .application-process-box-context{
            width: 100%;
            line-height: 20px;
            color:#333;
            font-family: PingFangSC-Regular;
            text-align: left;
            font-size: 12px;
            float: left;
            // margin-bottom: 12px;
            letter-spacing: -0.4px;
            float: left;
            font-weight: 400;
        }
    }
    .access-box{
        width: 100%;
        float: left;
        margin-top: 12px;
        border-radius: 10px;
        background: #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(52,52,52,0.10);
        padding: 0 10px;
        box-sizing: border-box; 
        .access-top{
            width: 100%;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            letter-spacing: -0.23px;
            color:#333333;
            float: left;
            position: relative;
            font-family: PingFangSC-Medium;
            font-weight: 550;
        }
        .access-top::after{
            content: "";
            width:100%;
            height: 1px;
            background-color: #D8D8D8;
            position: absolute;
            left: 0;
            top:36px;
        }
        .access-top::before{
            content: "";
            width:3px;
            height: 15px;
            background-color: #2529E8;
            position: absolute;
            left: -10px;
            top: 10.5px;
        }
        .access-list{
            width: 100%;
            float: left;
            margin-top: 4px;
            margin-bottom: 12px;
        }
        .p{
            width: 100%;
            float: left;
        }
        .span1{
            display: inline-block;
            line-height: 22px;
            width: 4.8%;
            float: left;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color:#333333;
        }
        .span2{
            display: inline-block;
            width: 95%;
            line-height: 22px;
            float: left;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color:#333333;
            // background-color: red;
        }
    }
    .apply-immediately-btn{
        position: fixed;
        bottom:0;
        left: 0;
        right:0;
        width: 100%;
        height: 50px;
        background-color: #2529E8;
        float: left;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        color:#fff;
        font-family: PingFangSC-Regular;
        letter-spacing: -0.38px;
    }
}
</style>
